import React, { PureComponent, createContext } from 'react'

const UserContext = createContext({
  name: '张久冬',
  age: 18,
})
export default class Test extends PureComponent {
  render() {
    return (
      <>
        <div>Test</div>
        <hr />
        <EnhanceHome></EnhanceHome>
        <hr />
        <EnhanceAbout> </EnhanceAbout>
      </>
    )
  }
}

// 1.使用高阶组件对context进行参数增强
class Home extends PureComponent {
  render() {
    return (
      <div>
        <div>Home</div>
        <div> Home姓名： {this.props.name}</div>
        <div>Home年龄： {this.props.age}</div>
      </div>
    )
  }
}

function About(props) {
  return (
    <div>
      <div>About</div>
      <div> About姓名： {props.name}</div>
      <div>About年龄： {props.age}</div>
    </div>
  )
}

function EnhanceCmpUserCtx(Cmp) {
  return class extends PureComponent {
    render() {
      return (
        <>
          <UserContext.Provider value={{ name: '倩倩', age: 1712 }}>
            <UserContext.Consumer>
              {user => {
                return <Cmp {...user} {...this.props}></Cmp>
              }}
            </UserContext.Consumer>
          </UserContext.Provider>
        </>
      )
    }
  }
}

const EnhanceHome = EnhanceCmpUserCtx(Home)
const EnhanceAbout = EnhanceCmpUserCtx(About)
